<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工列表</title>
    <link rel="stylesheet" href="/static/paper/plugins/element-ui/index.css" />
    <link rel="stylesheet" href="/static/paper/styles/page.css" />
    <style>
        .tableBar {
            display: flex;
            align-items: center;
            justify-content: left;
            margin-bottom: 20px;
            margin-left: 20px;
            height: 50px;

        }
        .tableBar .el-input {
            width: 250px; /* 输入框的宽度 */
            margin-right: 10px; /* 输入框与按钮之间的间距 */
        }
        .result-card {
            margin-bottom: 10px;
        }
        /* 响应式设计 */
        @media (max-width: 600px) {
            .tableBar {
                flex-direction: column; /* 小屏幕上垂直排列 */
                align-items: flex-start; /* 左对齐 */
            }
            .tableBar .el-input {
                width: 100%; /* 输入框在小屏幕下占满宽度 */
                margin-bottom: 10px; /* 输入框与按钮之间的间距 */
            }
        }
        .error-message {
            color: red; /* 错误信息的颜色 */
            font-size: 12px; /* 错误信息的字体大小 */
            margin-top: 5px; /* 错误信息的上边距 */
        }

        .container {
            background-color: #f8f9fa; /* 上下部分的共同背景色 */
            padding: 5px; /* 内边距 */
            border-radius: 4px; /* 圆角 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        }

        .tableBar {
            background-color: #f8f9fa; /* 工具条背景色 */
            padding: 5px; /* 内边距 */
            border-radius: 4px; /* 圆角 */
            margin-bottom: 10px; /* 工具条与表格之间的间距 */
        }
        .btn-common {
            background-color: #ff9800; /* 默认背景颜色 */
            color: white; /* 文字颜色 */
            border: none; /* 去掉默认边框 */
            padding: 10px 20px; /* 添加内边距 */
            border-radius: 4px; /* 圆角 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }

        /* 悬停效果，使用 filter 暗化 */
        .btn-common:hover {
            filter: brightness(0.85); /* 悬停时将亮度降低，变暗 */
        }
        .role-student {
            background-color: #cce5ff; /* 蓝色背景 */
            padding: 5px 10px; /* 添加内边距 */
            border-radius: 4px; /* 添加圆角 */
        }

        .role-employee {
            background-color: #ffeeba; /* 橙色背景 */
            padding: 5px 10px; /* 添加内边距 */
            border-radius: 4px; /* 添加圆角 */
        }
    </style>
</head>
<body>
<div id="member-app">
    <div class="container" style="background-color: #f8f9fa; margin: 20px; padding: 30px;">
        <div class="tableBar" style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
            <el-button @click="showAddDialog" class="btn-common" style="background-color: #00BFFF; color: white; border-color: #00BFFF;margin-right: 50px;">+ 添加员工</el-button>
            <span>类型</span>
            <el-select v-model="roleValue" placeholder="请选择角色" @change="handleQuery" style="width: 250px; margin-right: 50px;">
                <el-option label="所有" value=""></el-option>
                <el-option label="学生" value="学生"></el-option>
                <el-option label="职工" value="职工"></el-option>
            </el-select>
            <el-input
                v-model="input"
                placeholder="请输入姓名、邮箱"
                clearable
                @keyup.enter.native="handleQuery"
                style="width: 250px;">
            </el-input>
            <el-button class="btn-common" type="primary" @click="handleQuery" style="margin-right: 50px; background-color: #3399ff; color: white; border-color: #3399ff;">查询</el-button>
            <el-button class="btn-common" @click="showBulkLeaveDialog"  style="background-color: #e68a00; color: white; border-color: #e68a00;">批量休假</el-button>
            <el-button class="btn-common" @click="confirmBatchDelete" :disabled="selectedIds.length === 0" style="margin-right: 50px; background-color:  #ff6f61; color: white; border-color:  #ff6f61;">删除</el-button>
            <el-button @click="showImportDialog" class="btn-common" style="margin-right: 50px; background-color: #00bcd4; color: white; border-color: #00bcd4;" >批量导入</el-button>
            <el-button class="btn-common" @click="handleExport"  style="background-color: #e68a00; color: white; border-color: #e68a00;">批量导出</el-button>
        </div>
        <div style="background-color: #f8f9fa; margin-top: 20px;">
             <div style="max-height: 650px; overflow-y: auto;">
                <el-table :data="paginatedData" stripe :row-key="row => row.id" @selection-change="handleSelectionChange" style="background-color: #f8f9fa;" height="650px">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="name" label="员工姓名"></el-table-column>
                    <el-table-column prop="role" label="角色" prop="role">
                        <template slot-scope="scope">
                            <span :class="getRoleClass(scope.row.role)">{{ scope.row.role }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="email" label="邮箱"></el-table-column>
                    <el-table-column label="操作" width="160" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="editMemberHandle(scope.row)">编辑</el-button>
                            <el-button type="text" size="small" @click="confirmSingleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
             </div>
            <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
                <el-pagination :page-sizes="[10, 20, 30, 40, 500]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="counts" :current-page.sync="page" @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top: 20px;"></el-pagination>
            </div>
        </div>


        <!-- 添加员工对话框 -->
        <el-dialog title="添加员工" :visible.sync="addDialogVisible" @close="resetAddForm">
            <el-form :model="newEmployee">
                <el-form-item label="姓名" required>
                    <el-input v-model="newEmployee.name"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email" :rules="emailRules">
                    <el-input
                        v-model="newEmployee.email"
                        @input="validateEmail"
                        placeholder="请输入邮箱">
                    </el-input>
                    <div v-if="emailError" class="error-message">{{ emailError }}</div>
                </el-form-item>
                <el-form-item label="角色" required>
                    <el-select v-model="newEmployee.role" placeholder="请选择角色">
                        <el-option label="学生" value="学生"></el-option>
                        <el-option label="职工" value="职工"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetAddForm">取 消</el-button>
                <el-button type="primary" @click="submitNewEmployee" :disabled="emailError !== ''" >确 定</el-button>
            </span>
        </el-dialog>

        <!-- 批量导入对话框 -->
        <el-dialog title="批量导入员工" :visible.sync="importDialogVisible" @close="resetImportForm">
            <el-upload
                class="upload-demo"
                drag
                :auto-upload="false"
                :on-change="handleFileChange"
                :file-list="fileList"
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传 Excel 文件</div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetImportForm">取 消</el-button>
                <el-button type="primary" @click="submitImport">确 定</el-button>
            </span>
        </el-dialog>
       <el-dialog title="导入结果" :visible.sync="importResultDialogVisible" :append-to-body="true" width="600px">
            <div v-if="importResults.length">
                <el-card :body-style="{ padding: '20px' }" class="result-card">
                    <div class="text item first-message" style="text-align: center; margin-bottom: 10px; font-weight: bold;">
                        {{ importResults[0].message }} <!-- 第一条消息 -->
                    </div>
                    <div v-for="(result, index) in importResults.slice(1)" :key="index" class="text item">
                        {{ result.message }} <!-- 其他消息 -->
                    </div>
                </el-card>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="importResultDialogVisible = false">关闭</el-button>
            </span>
       </el-dialog>

        <!-- 编辑员工对话框 -->
       <el-dialog title="编辑员工" :visible.sync="editDialogVisible" @close="resetEditForm">
            <el-form :model="editEmployee">
                <el-form-item label="姓名" required>
                    <el-input v-model="editEmployee.name"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email" :rules="emailRules">
                    <el-input
                        v-model="editEmployee.email"
                        @input="validateEmail"
                        placeholder="请输入邮箱">
                    </el-input>
                    <div v-if="emailError" class="error-message">{{ emailError }}</div>
                </el-form-item>
                <el-form-item label="角色" required>
                   <el-select v-model="editEmployee.role" placeholder="请选择角色">
                        <el-option label="学生" value="学生"></el-option>
                        <el-option label="职工" value="职工"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer" style="display: flex; justify-content: space-between; align-items: center;">
    <el-button type="primary" @click="showLeaveDialog">请假/休假</el-button>
    <div style="flex-grow: 1;"></div> <!-- 这个 div 用于占位 -->
    <el-button @click="resetEditForm">取 消</el-button>
    <el-button type="primary" @click="submitEditEmployee" :disabled="emailError !== ''">确 定</el-button>
  </span>
       </el-dialog>
        <!-- 请假/休假对话框 -->
        <el-dialog title="请假/休假" :visible.sync="leaveDialogVisible" @close="resetLeaveForm">
            <el-form :model="leaveForm">
                <el-form-item label="请假类型" required>
                    <el-select v-model="leaveForm.leaveType" placeholder="请选择请假类型">
                        <el-option label="请假" value="请假"></el-option>
                        <el-option label="休假" value="休假"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始日期" required>
                    <el-date-picker v-model="leaveForm.startDate" type="date" placeholder="选择开始日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期" required>
                    <el-date-picker v-model="leaveForm.endDate" type="date" placeholder="选择结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="原因" required>
                    <el-input type="textarea" v-model="leaveForm.reason" placeholder="请假原因"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetLeaveForm">取 消</el-button>
                <el-button type="primary" @click="submitLeaveApplication">提交</el-button>
            </span>
        </el-dialog>
         <!-- 批量休假对话框 -->
        <el-dialog title="批量休假" :visible.sync="bulkLeaveDialogVisible" @close="resetBulkLeaveForm">
          <el-form :model="bulkLeaveForm">
            <el-form-item label="休假原因" required>
              <el-input v-model="bulkLeaveForm.reason" placeholder="请输入休假原因"></el-input>
            </el-form-item>
            <el-form-item label="开始日期" required>
              <el-date-picker v-model="bulkLeaveForm.start_date" type="date" placeholder="选择开始日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" required>
              <el-date-picker v-model="bulkLeaveForm.end_date" type="date" placeholder="选择结束日期"></el-date-picker>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="bulkLeaveDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitBulkLeave">提交</el-button>
          </span>
        </el-dialog>
        <el-dialog title="批量请假结果" :visible.sync="bulkLeaveResultDialogVisible" :append-to-body="true" width="600px">
            <div v-if="bulkLeaveResults.length">
                <el-card :body-style="{ padding: '20px' }" class="result-card">
                    <div class="text item first-message" style="text-align: center; margin-bottom: 10px; font-weight: bold;">
                        {{ bulkLeaveResults[0].message }} <!-- 第一条消息 -->
                    </div>
                    <div v-for="(result, index) in bulkLeaveResults.slice(1)" :key="index" class="text item">
                        {{ result.message }} <!-- 其他消息 -->
                    </div>
                </el-card>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="bulkLeaveResultDialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>

        <!-- 删除确认对话框 -->
       <el-dialog title="确认删除" :visible.sync="deleteDialogVisible" @close="resetDeleteConfirmation">
            <p>您确定要删除该员工吗？</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetDeleteConfirmation">取 消</el-button>
                <el-button type="danger" @click="deleteEmployee">确 定</el-button>
            </span>
       </el-dialog>

        <!-- 批量删除确认对话框 -->
       <el-dialog title="确认批量删除" :visible.sync="batchDeleteDialogVisible" @close="resetBatchDeleteConfirmation">
            <p>您确定要删除选中的员工吗？</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetBatchDeleteConfirmation">取 消</el-button>
                <el-button type="danger" @click="handleBatchDeleteConfirm">确 定</el-button>
            </span>
       </el-dialog>
    </div>
</div>

<script src="/static/paper/plugins/vue/vue.js"></script>
<script src="/static/paper/plugins/element-ui/index.js"></script>
<script src="/static/paper/plugins/axios/axios.min.js"></script>
<script src="/static/paper/js/request.js"></script>
<script src="/static/paper/api/member.js"></script>
<script>
    new Vue({
        el: '#member-app',
        data() {
            return {
                input: '',
                counts: 0,
                page: 1,
                roleValue: '',
                pageSize: 10,
                tableData: [],
                paginatedData: [],
                selectedIds: [],
                user: '',
                addDialogVisible: false,
                editDialogVisible: false,
                leaveDialogVisible: false,
                deleteDialogVisible: false,
                batchDeleteDialogVisible: false, // 控制批量删除确认对话框的显示
                importDialogVisible: false,
                importResultDialogVisible: false, // 控制导入结果对话框的显示
                fileList: [],
                importResults: [],
                deleteResults: [],
                newEmployee: {
                    name: '',
                    email: '',
                    role: ''
                },
                editEmployee: {
                    id: null,
                    name: '',
                    email: '',
                    role: ''
                },
                leaveForm: {
                    leaveType: '', // 新增属性用于保存请假类型
                    startDate: '',
                    endDate: '',
                    reason: ''
                },
                bulkLeaveDialogVisible: false, // 控制对话框显隐
                bulkLeaveForm: {
                    reason: '',
                    start_date: '',
                    end_date: ''
                },
                emailError: '',
                bulkLeaveResultDialogVisible: false, // 控制批量请假结果对话框的显示
                bulkLeaveResults: [], // 存储批量请假操作的结果
            }
        },
        created() {
            this.init();
            const userInfo = localStorage.getItem('userInfo');
            this.user = userInfo ? JSON.parse(userInfo).username : '';
        },
        methods: {
            getRoleClass(role) {
                return role === '职工' ? 'role-employee' : 'role-student';
            },
            async init() {
                await getMemberList()
                    .then(res => {
                        if (res.status === 'success') {
                            this.tableData = res.data;
                            this.counts = res.total;
                            this.updatePaginatedData();
                        } else {
                            this.$message.error('获取数据失败: ' + res.msg);
                        }
                    })
                    .catch(err => {
                        this.$message.error('请求出错了：' + err);
                    });
            },
            updatePaginatedData() {
                const filteredData = this.tableData.filter(employee => {
                    const matchesRole = this.roleValue ? employee.role.toString() === this.roleValue : true; // 根据角色过滤
                    const matchesInput = employee.name.includes(this.input) || employee.email.includes(this.input); // 根据输入框过滤
                    return matchesRole && matchesInput; // 同时满足角色和输入框条件
                });

                this.counts = filteredData.length; // 更新计数
                const start = (this.page - 1) * this.pageSize;
                const end = start + this.pageSize;
                this.paginatedData = filteredData.slice(start, end); // 更新分页数据
            },
            handleQuery() {
                this.page = 1;
                this.updatePaginatedData();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.page = 1;
                this.updatePaginatedData();
            },
            handleCurrentChange(newPage) {
                this.page = newPage;
                this.updatePaginatedData();
            },

            editMemberHandle(employee) {
                this.editEmployee = {
                    id: employee.id,
                    name: employee.name,
                    email: employee.email,
                    role: employee.role
                };
                this.editDialogVisible = true;
            },
            showAddDialog() {
                this.resetAddForm();
                this.addDialogVisible = true;
            },
            showImportDialog() {
                this.importDialogVisible = true; // 打开导入对话框
            },
            resetAddForm() {
                this.newEmployee = { name: '', email: '', role: '' };
                this.emailError = ''; // 重置邮箱错误信息
                this.addDialogVisible = false;
            },
            validateEmail(value) {
                const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                if (!value) {
                    this.emailError = '邮箱不能为空'; // 自定义错误信息
                } else if (!emailPattern.test(value)) {
                    this.emailError = '邮箱格式不正确'; // 自定义错误信息
                } else {
                    this.emailError = ''; // 清空错误信息
                }
            },
            resetEditForm() {
                this.editEmployee = { name: '', email: '', role: '' };
                this.emailError = ''; // 清空错误信息
                this.editDialogVisible = false;
            },
            showLeaveDialog() {
                this.resetLeaveForm();
                this.leaveDialogVisible = true; // 打开请假对话框
            },
            resetLeaveForm() {
                this.leaveForm = { leaveType: '', startDate: '', endDate: '', reason: '' }; // 重置请假表单
                this.leaveDialogVisible = false; // 关闭对话框
            },
            async submitLeaveApplication() {
              try {
                const response = await submitLeaveApplication(this.editEmployee.id, this.leaveForm); // 调用 API 函数
                if (response && response.status === 'success') {
                  this.$message.success(response.msg);
                  this.resetLeaveForm(); // 成功后重置表单
                  this.editDialogVisible = false;
                } else {
                  this.$message.error(response.msg);
                }
              } catch (error) {
                this.$message.error('提交请假申请时出错: ' + (error.response?.data?.message || error.message));
              }
            },


            showBulkLeaveDialog() {
              if (this.selectedIds.length === 0) {
                    this.$message.warning('请先选择员工'); // 显示警告消息
                    return; // 退出函数，不执行后续逻辑
              }
              this.bulkLeaveDialogVisible = true;
            },
            async submitBulkLeave() {
              const ids = this.selectedIds;
              const { reason, start_date, end_date } = this.bulkLeaveForm;
              try {
                const response = await submitBulkLeave(ids, {
                  leaveType: "休假", // 可以根据实际需要设置请假类型
                  reason: reason,
                  startDate: start_date,
                  endDate: end_date
                });

                if (response.data.status === 'success') {
                  this.$message.success(response.data.msg);
                  this.bulkLeaveDialogVisible = false;
                  this.resetBulkLeaveForm();
                  this.handleQuery(); // 刷新员工列表
                } else {

                  // 处理失败的情况
                    this.$message.error(response.data.msg); // 显示总的错误消息

                    // 清空之前的结果
                    this.bulkLeaveResults = [];
                    response.data.data.forEach(msg => {
                        this.bulkLeaveResults.push({ message: msg.trim() }); // 添加每条具体失败消息
                    });

                    // 显示批量请假结果对话框
                    this.bulkLeaveResultDialogVisible = true;
                    //this.bulkLeaveDialogVisible = false; // 隐藏批量请假对话框
                }
              } catch (error) {
                this.$message.error('提交请假申请时出错: ' + error.message);
              }
            },
            resetBulkLeaveForm() {
              this.bulkLeaveForm.reason = '';
              this.bulkLeaveForm.start_date = '';
              this.bulkLeaveForm.end_date = '';
            },
            resetImportForm() {
                this.importDialogVisible = false; // 关闭导入对话框
                this.fileList = []; // 清空文件列表
                this.importResults = []; // 清空导入结果
            },
            handleFileChange(file, fileList) {
                this.fileList = fileList; // 更新文件列表
            },
            async submitNewEmployee() {
                try {
                    const res = await addEmployee(this.newEmployee);
                    if (res.status === 'success') {
                        this.$message.success(res.msg);
                        this.resetAddForm();
                        this.init(); // 更新表格数据
                    } else {
                        this.$message.error(res.msg);
                    }
                } catch (error) {
                    this.$message.error('添加员工失败: ' + (error.response.data.error || error.message));
                }
            },
            async submitEditEmployee() {
                try {
                    const res = await editEmployee(this.editEmployee);
                    if (res.status === 'success') {
                        this.$message.success(res.msg);
                        this.resetEditForm();
                        this.init(); // 更新表格数据
                    } else {
                        this.$message.error(res.msg);
                    }
                } catch (error) {
                    this.$message.error('编辑员工失败: ' + (error.response.data.error || error.message));
                }
            },
            confirmSingleDelete(employeeId) {
                this.employeeToDelete = employeeId;
                this.deleteDialogVisible = true;
            },
            resetDeleteConfirmation() {
                this.deleteDialogVisible = false;
                this.employeeToDelete = null;
            },
            async deleteEmployee() {
                try {
                    const res = await deleteEmployee(this.employeeToDelete);
                    if (res.status === 'success') {
                        this.$message.success(res.msg);
                        this.init(); // 更新表格数据
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.resetDeleteConfirmation();
                } catch (error) {
                    this.$message.error('删除员工失败: ' + (error.response.data.error || error.message));
                }
            },
            confirmBatchDelete() {
                this.batchDeleteDialogVisible = true; // 显示批量删除确认对话框
            },
            resetBatchDeleteConfirmation() {
                this.batchDeleteDialogVisible = false; // 关闭批量删除确认对话框
            },
            async handleBatchDeleteConfirm() {
                try {
                    const res = await deleteEmployees(this.selectedIds); // 调用批量删除API
                    this.deleteResults = []; // 清空之前的删除结果

                    // 检查成功的删除消息
                    if (res.data.success && res.data.success.length > 0) {
                        this.$message.success(res.msg);
                    }

                    // 检查失败的删除消息
                    if (res.data.error && res.data.error.length > 0) {
                        this.$message.success(res.msg);
                    }
                    this.init(); // 重新加载数据
                } catch (error) {
                    this.$message.error('删除员工失败: ' + (error.response.data.error || error.message));
                } finally {
                    this.resetBatchDeleteConfirmation(); // 关闭确认框
                }
            },

            async submitImport() {
                if (this.fileList.length === 0) {
                    this.$message.error('请先选择文件');
                    return;
                }

                const formData = new FormData();
                formData.append('file', this.fileList[0].raw); // 获取文件并添加到 FormData

                try {
                    const res = await uploadExcel(formData); // 调用上传 API
                    this.importResults = []; // 清空之前的结果

                    if (res.status === 'success') {
                        this.$message.success(res.msg);
                        this.importDialogVisible = false;
                        this.init(); // 更新数据
                    } else {
                            this.$message.error(res.msg);
                            res.data.forEach(msg => {
                                this.importResults.push({ message: msg.trim() });
                                this.importResultDialogVisible = true; // 显示导入结果对话框
                                this.importDialogVisible = true;
                            });
                    }
                } catch (error) {
                    this.$message.error(`导入失败，请重试！具体错误: ${error.message || error}`); // 显示具体错误信息
                }
            },
            handleSelectionChange(selected) {
                const currentSelectedIds = selected.map(item => item.id);// 获取选中的员工ID
                // 更新全局 selectedIds 数组，确保不重复
                // this.selectedIds = [...new Set([...this.selectedIds, ...currentSelectedIds])];
                this.selectedIds = currentSelectedIds;  //todo:当前bug导致翻页之前的复选框选中消失
            },

             handlePageChange() {
                // 每次翻页时，更新 paginatedData
                this.updatePaginatedData();
            },
            async handleExport() {
                if (this.selectedIds.length === 0) {
                    this.$message.warning('请先选择要导出的员工');
                    return;
                }

                try {
                    const res = await exportAllEmployees(this.selectedIds); // 调用导出 API，传递选中的 ID

                    // 创建 Blob 对象并生成下载链接
                    const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
                    const url = window.URL.createObjectURL(blob);
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', 'employees.xlsx'); // 设置下载文件名
                    document.body.appendChild(link);
                    link.click();
                    link.parentNode.removeChild(link); // 下载后移除链接
                    this.selectedIds = []
                } catch (error) {
                    this.$message.error('导出失败: ' + (error.response?.data?.error || error.message));
                }
            },

        }
    });
</script>
</body>
</html>
